<template>
	<view class="container">
		<view class="form-card">
			<view class="form-header">
				<text class="header-title">创建比赛</text>
			</view>

			<form @submit.prevent="submitForm">
				<view class="form-item">
					<text class="label">比赛名称</text>
					<input type="text" v-model="formData.matchName" placeholder="请输入比赛名称" />
				</view>

				<view class="form-item">
					<text class="label">比赛类型</text>
					<picker @change="bindTypeChange" :value="typeIndex" :range="matchTypes">
						<view class="picker">
							{{ formData.matchType || "请选择比赛类型" }}
						</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">比赛装备</text>
					<input type="text" v-model="formData.zhuangbei" placeholder="请输入比赛装备" />
				</view>
				<view class="form-item">
					<text class="label">比赛规则</text>
					<input type="text" v-model="formData.guize" placeholder="请输入比赛规则" />
				</view>
				<view class="form-item">
					<text class="label">开始时间</text>
					<view class="datetime-picker">
						<picker mode="date" :value="formData.startDate" start="2024-01-01" end="2025-12-31" @change="bindDateChange">
							<view class="picker date-picker">
								{{ formData.startDate || "选择日期" }}
							</view>
						</picker>
						<picker mode="time" :value="formData.startTime" @change="bindTimeChange">
							<view class="picker time-picker">
								{{ formData.startTime || "选择时间" }}
							</view>
						</picker>
					</view>
				</view>

				<view class="form-item">
					<text class="label">比赛地点</text>
					<input type="text" v-model="formData.location" placeholder="请输入比赛地点" />
				</view>

				<button class="submit-btn" type="primary" @tap="submitForm">创建比赛</button>
			</form>
		</view>
	</view>
</template>

<script>
import { createMatch } from "@/api/system/bs";
export default {
	data() {
		return {
			formData: {
				matchName: "",
				matchType: "",
				startDate: "",
				startTime: "",
				location: "",
				zhuangbei: "",
				guize: "",
			},
			matchTypes: ["5人制", "8人制", "11人制"],
			typeIndex: 0
		};
	},
	methods: {
		bindTypeChange(e) {
			this.typeIndex = e.detail.value;
			this.formData.matchType = this.matchTypes[e.detail.value];
		},
		bindDateChange(e) {
			this.formData.startDate = e.detail.value;
		},
		bindTimeChange(e) {
			this.formData.startTime = e.detail.value;
		},
		submitForm() {
			// 表单验证
			if (!this.formData.matchName) {
				uni.showToast({
					title: "请输入比赛名称",
					icon: "none"
				});
				return;
			}
			if (!this.formData.matchType) {
				uni.showToast({
					title: "请选择比赛类型",
					icon: "none"
				});
				return;
			}
			if (!this.formData.startDate || !this.formData.startTime) {
				uni.showToast({
					title: "请选择完整的开始时间",
					icon: "none"
				});
				return;
			}
			if (!this.formData.location) {
				uni.showToast({
					title: "请输入比赛地点",
					icon: "none"
				});
				return;
			}

			// 组合日期和时间
			const startTime = `${this.formData.startDate} ${this.formData.startTime}`;
			const submitData = {
				...this.formData,
				startTime
			};

			console.log("提交的表单数据:", submitData);
			// TODO: 调用API提交表单数据
			createMatch(submitData).then(res => {
				console.log(res);
				if (res.code === 200) {
					uni.showToast({
						title: "创建成功",
						icon: "success"
					});
				}
			});
		}
	}
};
</script>

<style>
.container {
	padding: 20px;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.form-card {
	background-color: #fff;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.form-header {
	margin-bottom: 30px;
	border-bottom: 1px solid #eee;
	padding-bottom: 15px;
}

.header-title {
	font-size: 20px;
	font-weight: bold;
	color: #333;
}

.form-item {
	margin-bottom: 25px;
}

.label {
	display: block;
	margin-bottom: 8px;
	font-size: 16px;
	color: #333;
	font-weight: 500;
}

.datetime-picker {
	display: flex;
	gap: 10px;
}

.date-picker,
.time-picker {
	flex: 1;
	height: 40px;
	line-height: 40px;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 0 15px;
	background-color: #f9f9f9;
}

.picker {
	height: 40px;
	line-height: 40px;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 0 15px;
	background-color: #f9f9f9;
}

input {
	width: 100%;
	height: 40px;
	line-height: 40px;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 0 15px;
	box-sizing: border-box;
	background-color: #f9f9f9;
	font-size: 14px;
}

input:focus,
.picker:active {
	border-color: #007aff;
	background-color: #fff;
}

.submit-btn {
	margin-top: 40px;
	height: 45px;
	line-height: 45px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
	background: linear-gradient(to right, #007aff, #0056b3);
}

.submit-btn:active {
	opacity: 0.8;
}
</style>
